<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="renderer" content="webkit">
		<title>高卡氏 官方主页</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/headroom.min.js"></script>
		<script src="js/jQuery.headroom.min.js"></script>
		<link rel="stylesheet" href="css/all.css">
		<script src="js/all.js"></script>
		<style>
			.smart>a {
				position: absolute;
				z-index: 3;
				top: 42%;
				left: 22%;
			}
			
			.app-main {
				background-color: #FFFFFF;
				padding: 20px 5%;
			}
			
			.app-main table {
				width: 100%;
			}
			
			.app-main img {
				width: 100px;
				height: 100px;
			}
			
			.app-main span {
				font-size: 50px;
			}
		</style>
	</head>

	<body>
		<header class="allbox header">
			<img id="header-logo">
			<div style="float: right;">
				<img id="header1">&nbsp;&nbsp;&nbsp;&nbsp;
				<a><img id="header2"></a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a><img id="header3"></a>&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="javascript:void(0);" onclick="join_favorite()"><img id="header4"></a>
			</div>
		</header>
		<div class="all allbox">
			<div id="carousel-generic" class="carousel slide" data-ride="carousel">
				<!-- 小圆点 -->
				<ol class="carousel-indicators img-opacity">
					<li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-generic" data-slide-to="1"></li>
				</ol>

				<!-- 项目 -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="img/carousel1.jpg" class="img-responsive">
					</div>
					<div class="item">
						<img src="img/carousel2.png" class="img-responsive">
					</div>
				</div>

				<!-- 左右箭头-->
				<!-- <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			</a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			</a> -->
			</div>
			<div class="menu allbox">
				<ul class="nav nav-pills">
					<li role="presentation"><a href="about.html">联系我们</a></li>
					<li role="presentation"><a href="app-all.html">行业方案</a></li>
					<li role="presentation" class="dropdown">
						<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">智能产品 <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="product-smart.html">防丢卫士</a></li>
							<li><a href="product-nfc.html">智能NFC</a></li>
						</ul>
					</li>
					<li role="presentation"><a href="company.html">公司简介</a></li>
				</ul>
			</div>
			<div class="smart allbox">
				<img src="img/index-smart.jpg" class="img-responsive">
				<div class="smart-txt">
					<h1>小器点&nbsp;&nbsp;&nbsp;&nbsp;防丢卫士</h1>
					<h3>老人,小孩,钱包财物,手机,行李。<br>通通管起来。在您身边的智能管家。</h3>
					<h2><br>防，在丢失之前<br>&nbsp;</h2>
					<p class="text-center">
						<a href="product-smart.html" type="button" class="btn btn-primary">进入详情</a>
					</p>
				</div>
			</div>
			<div class="smart allbox">
				<img src="img/index-app.jpg" class="img-responsive">
				<div class="app-txt">
					<h1>移动APP<br>行业应用开发</h1>
					<h5>移动APP解决方案，<br>为各行业企业向移动互联网转型翻开了崭新一页</h5>
				</div>
				<a href="app-all.html" type="button" class="btn btn-primary">进入详情</a>
			</div>
			<div class="app-main allbox">行业解决方案案例
				<br>&nbsp;
				<table class="text-center">
					<tr>
						<td><a onclick="last()"><span class="glyphicon glyphicon-chevron-left"></span></a></td>
						<td><img id="app-img0"></td>
						<td><img id="app-img1"></td>
						<td><img id="app-img2"></td>
						<td><img id="app-img3"></td>
						<td><a onclick="next()"><span class="glyphicon glyphicon-chevron-right"></span></a></td>
					</tr>
				</table>
			</div>
			<div class="foot allbox">
				<p></p>
			</div>
		</div>
	</body>
	<script>
		var app_img = ['img/app-smart.png', 'img/app-hoyoubo.png', 'img/app-taili.png', 'img/app-sushi.png', 'img/app-smart2.png', 'img/app-na.png'];
		var size = app_img.length;
		var first = 0;
		var nf = 0;
		$('doucument').ready(function() {
			doing();
		});

		function last() {
			//if (first > 0) {
			first -= 1;
			if (first < 0) {
				first += size;
			}
			doing();
			//}
		}

		function next() {
			//if (size - 4 > first) {
			first += 1;
			if (first >= size) {
				first -= size;
			}
			doing();
			//}
		}

		function doing() {
			for (var i = 0; i < 4; i++) {
				nf = i + first;
				if (nf >= size) {
					nf -= size;
				}
				$('#app-img' + i).attr('src', app_img[nf]);
			}
		}
	</script>

</html>